<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				list-style: none;
				padding: 0;
			}
			
			.web {
				margin: 0 auto;
				width: 350px;
				text-align: left;
			}
			
			li {
				display: inline-block;
			}
			.xin .sxl{
				border: 1px solid #D2691E;
			}
			.sctwo .sxl{
				border: 1px solid #D2691E;
			}
			
			.sl{
				width: 70px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			.cun {
				width: 70px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.yin {
				width: 60px;
				height: 30px;
				border: 1px solid #D2691E;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.jin {
				width: 70px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
				cursor: pointer;
			}
			
			.hui {
				width: 80px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.gb {
				width: 65px;
				height: 30px;
				border: 1px solid #D2691E;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.gbone {
				width: 70px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.gbtwo {
				width: 80px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.gong {
				width: 70px;
				height: 30px;
				border: 1px solid #D2691E;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.yi {
				width: 85px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.lian {
				width: 95px;
				height: 30px;
				border: 1px solid #D2D0D3;
				text-align: center;
				line-height: 30px;
				color: #A4A4A4;
				font-size: 16px;
				cursor: pointer;
			}
			
			.ben {
				padding-bottom: 20px;
				border-bottom: 1px solid #D2D0D3;
			}
			
			.rmb {
				font-size: 16px;
				color: chocolate;
			}
			
			button {
				width: 300px;
				height: 35px;
				font-size: 20px;
				color: #fff;
				border: none;
				background: chocolate;
			}
			
			.nav {
				width: 500px;
				height: 200px;
				border: 1px solid #00008B;
				margin-top: 100px;
			}
			
			.xuan {
				text-align: center;
			}
			
			.xuan li {
				width: 100px;
				height: 60px;
				text-align: center;
				font-size: 20px;
				line-height: 60px;
				border: 1px solid #00008B;
				margin-left: 20px;
			}
			
			.test {
				text-align: center;
				position: relative;
			}
			
			.test div {
				position: absolute;
				top: 0;
				display: none;
			}
			
			.test div:nth-child(1) {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="web">
			<ul class="xin">
				<li class="hao">型号</li>
				<li class="sl sxl">4.7英寸</li>
				<li class="sl">5.5英寸</li>
			</ul>
			<ul class="col">
				<li>颜色</li>
				<li class="yin">银色</li>
				<li class="jin">金色</li>
				<li class="hui">深空灰色</li>
			</ul>
			<ul class=" sctwo">
				<li>内存</li>
				<li class="sl sxl">16GB</li>
				<li  class="sl" >64GB</li>
				<li  class="sl" >128GB</li>
			</ul>
			<ul class="ben">
				<li>版本</li>
				<li class="gong">公开版本</li>
				<li class="yi">移动增费版</li>
				<li class="lian">联通合约版</li>
			</ul>
			<ul class="jiage">
				<li>价格:</li>
				<li class="rmb">￥5288.00</li>
			</ul>
			<button>立即购买</button>
		</div>

		<div class="nav">
			<ul class="xuan">
				<li>点击</li>
				<li>事件</li>
				<li>过后</li>
			</ul>
			<div class="test">
				<div>点击</div>
				<div>事件</div>
				<div>过后</div>
			</div>
		</div>
		<script type="text/javascript">
			//型号
			var alil = document.querySelectorAll(".xin li");
			var rmb = document.querySelector(".rmb");
			var ar = document.querySelector(".xin");
			for(var i = 1; i < alil.length; i++) {
				(function(k) {
					alil[i].addEventListener("click", function() {
						
						for(var j = 0; j < alil.length; j++) {
							alil[j].classList.remove("sxl");
						}
						alil[k].classList.add("sxl");
						xijia();
					});
				})(i);
			}
			//颜色
			var col = document.querySelectorAll(".col li");
				for (var i=1;i<col.length;i++){
					(function(k){
						col[i].addEventListener("click",function(){
							for (var j=1;j<col.length;j++) {
								col[j].style.borderColor="#D2D0D3";
							}
							col[k].style.borderColor="#D2691E";
						});
					})(i);
				}
			//内存
				
				
				var sctwo = document.querySelectorAll(".sctwo li");
				for (var i=1;i<sctwo.length;i++){
					(function(k){
						sctwo[i].addEventListener("click",function(){
							for (var j=1;j<sctwo.length;j++){
								sctwo[j].classList.remove("sxl");
							}
							sctwo[k].classList.add("sxl");
							xijia();
						});
					})(i);
				}
				//计算价格
				function xijia(){
					var xz = 0;
					var x2 = 0;
					for (var i=0;i<alil.length;i++){
						if(alil[i].classList.contains("sxl")){
							xz = i==1?5288.00:6088.00;
							console.log(xz);
						}
					}
					for (var j=0;j<sctwo.length;j++){
						if(sctwo[j].classList.contains("sxl")){
							x2 = j==1?0:j==2?800:1600;
							console.log(x2);
						}
					}
					rmb.innerText="￥"+(xz+x2).toFixed(2);
				}
			//版本
			var ben = document.querySelectorAll(".ben li");
				for (var i=1;i<col.length;i++){
					(function(k){
						ben[i].addEventListener("click",function(){
							for (var j=1;j<ben.length;j++) {
								ben[j].style.borderColor="#D2D0D3";
							}
							ben[k].style.borderColor="#D2691E";
						});
					})(i);
				}
				
			//选项卡
			var ali = document.querySelectorAll(".xuan li");
			var test = document.querySelectorAll(".test div")
			for(var i = 0; i < ali.length; i++) {
				(function(k) {
					ali[i].addEventListener("click", function() {
						for(var j = 0; j < ali.length; j++) {
							test[j].style.display = "none";
						}
						test[k].style.display = "block";
					})
				})(i);
			}
		</script>
	</body>

</html>